<template>
  <transition name="van-slide-down">
    <div class="edit-addr-container"
         v-if="editInfo.show">
      <section class="adrM adrM-add">
        <div class="address-header">
          <a href="javascript:;"
             class="btn-back"
             @click="closePop">
          <span class="icon-back"></span>
          </a>
          <span v-if="editInfo.type=='1'">添加新地址</span>
          <span v-else>编辑地址</span>
        </div>

        <section class="edit-content">
          <div class="edit-wrap">
            <ul class="add">
              <li class="clearfix">
                <label class="bdbox">
                  <span class="colorRed">*</span> 收货人
                </label>
                <input type="text"
                       name="name"
                       id="name"
                       placeholder="请填写收货人的姓名"
                       @blur="blurEvent"
                       v-model.trim="editInfo.addrDetail.receiver_name"
                       class="right-input" />
              </li>
              <li class="clearfix">
                <label class="bdbox">
                  <span class="colorRed">*</span> 手机号码
                </label>
                <input type="tel"
                       name="mobile"
                       placeholder="请填写收货人的手机号码"
                       @blur="blurEvent"
                       v-model.trim="editInfo.addrDetail.receiver_mobile"
                       class="right-input" />
              </li>
              <li class="clearfix">
                <label class="bdbox">
                  <span class="colorRed"
                        v-if="editInfo.isNeedAddress=='1'">*</span>收货地区
                </label>
                <a href="javascript:;"
                   class="j-addrM-selectArea"
                   :class="{selectArea:editInfo.areaBtnTextEdit?false:selectArea}"
                   @click="selectAddress"
                   v-text="editInfo.areaBtnTextEdit?editInfo.areaBtnTextEdit:areaBtnText"></a>
              </li>
              <li class="clearfix"
                  v-if="editInfo.isNeedTown=='1'">
                <label class="bdbox">
                  <span class="colorRed"
                        v-if="editInfo.isNeedTownMust=='1'">*</span>乡镇/街道
                </label>
                <a href="javascript:;"
                   class="j-addrM-selectArea"
                   :class="{selectArea:editInfo.areaBtnTextEditTown?false:selectAreaTown}"
                   @click="selectAddressTown"
                   v-text="editInfo.
                  areaBtnTextEditTown?editInfo.areaBtnTextEditTown:areaBtnTextTown"></a>
              </li>
              <li class="clearfix textarea">
                <label class="bdbox">
                  <span class="colorRed">*</span> 详细地址
                </label>
                <textarea name="address"
                          class="addr-detail-textarea"
                          placeholder="请填写详细的地址"
                          @blur="blurEvent"
                          v-model.trim="editInfo.addrDetail.address"></textarea>
              </li>
            </ul>
          </div>
        </section>

        <div class="bottom-btn">
          <a href="javascript:;"
             class="j-addrM-add red-gra-btn"
             v-if="editInfo.type=='1'"
             @click="clickAddr">保存并使用</a>
          <a href="javascript:;"
             class="j-addrM-add red-gra-btn"
             @click="clickAddr"
             v-else>保存</a>
        </div>
      </section>
      <!-- 遮罩层 -->
      <map-area :visible.sync="showAreaPop"
                @onSelect="handleConfirm"></map-area>

      <!-- 选择乡镇 -->
      <van-popup v-model="townShow"
                 v-if="townShow"
                 position="bottom"
                 :round="true"
                 :style="{ height: '30%' }">
        <ul class="townList">
          <li class="li">
            请选择乡镇/街道
          </li>
          <li class="li"
              v-for="item in townLists"
              :key="item.town_id"
              @click="getTownLists(item)">{{item.town_name}}</li>
        </ul>
      </van-popup>
    </div>
  </transition>
</template>

<script>
import mapArea from '@/components/mapArea'
import Vue from 'vue'
import { Area, Popup } from 'vant'
Vue.use(Area)
Vue.use(Popup)
import {
  getAddressTown
} from '@/api/user/address.js'
import {
  getDhsAddress,
  addDhsAddress
} from '@/api/dz/dzApi.js'
export default Vue.extend ({
  name: 'index',
  components: {
    mapArea
  },
  data() {
    return {
      editInfo: {
        isNeedAddress: 1,
        isNeedTown: 1,
        // 获取的县区下有没有乡镇
        isNeedTownMust: 1,
        type: '1',
        show: true,
        areaBtnTextEdit: '', // 选择地址名字 默认为空
        areaBtnTextEditTown: '', // 乡镇名字 默认为空
        TextareaDel: false,
        addrDetail: {
        //   address_id: '',
          receiver_name: '',
          receiver_mobile: '',
          province_id: '',
          city_id: '',
          area_id: '',
          town_id: '',
          address: '',
          type: 1
        }
      },
      townLists: [],
      // 快速识别
      discernTextarea: '',
      // 遮罩层默认关闭
      showAreaPop: false,
      // 乡镇选择列表默认关闭
      townShow: false,
      selectArea: 1,
      selectAreaTown: 1,
      areaCode: [], // 选择地址参数 默认为空
      areaCodeTown: '', // 乡镇参数 默认为空
      areaBtnText: '点击选择', // 默认文字
      areaBtnTextTown: '点击选择' // 默认文字
    }
  },
  methods: {
    blurEvent() {
      window.scroll(0, 0)
    },
    closePop() {
      this.editInfo.show = false
    },
    // 点击调用乡镇选择
    selectAddressTown() {
      if (!this.editInfo.addrDetail.area_id) {
        this.$Error('请选择完整的省市县')
        // this.$Error('请先选择收货地区')
        return
      }
      this.townShow = true
    },
    // 选择乡镇
    getTownLists(item) {
      // console.log(item)
      this.editInfo.areaBtnTextEditTown = item.town_name
      this.areaCodeTown = this.editInfo.addrDetail.town_id = item.town_id
      this.townShow = false
    },
    // 点击调用地址选择
    selectAddress() {
      this.showAreaPop = true
    },
    // 确认
    handleConfirm(val) {
      if (!val.province_id || !val.city_id) {
        this.$Error('请选择完整的省市县')
      } else {
        this.showAreaPop = false
        this.editInfo.areaBtnTextEdit = val.province_name + ' ' + val.city_name + ' ' + val.area_name
        this.editInfo.addrDetail.province_id = val.province_id
        this.editInfo.addrDetail.city_id = val.city_id
        this.editInfo.addrDetail.area_id = val.area_id
        this.editInfo.addrDetail.town_id = ''
        this.editInfo.addrDetail.address = ''
      }
    },
    // 保存地址
    clickAddr() {
      this.areaCode = [
        this.editInfo.province,
        this.editInfo.city,
        this.editInfo.area
      ]
      // console.log(this.editInfo)
      if (!this.editInfo.addrDetail.receiver_name) {
        this.$Error('请填写收货人的姓名')
        return
      }
      if (!this.editInfo.addrDetail.receiver_mobile) {
        this.$Error('请填写收货人的手机号码')
        return
      }
      if (this.editInfo.isNeedAddress == '1' && !this.editInfo.areaBtnTextEdit) {
        this.$Error('请选择收货地区')
        return
      }
      if (this.editInfo.isNeedTown == '1' && this.editInfo.isNeedTownMust == '1' && !this.editInfo.areaBtnTextEditTown) {
        this.$Error('请选择乡镇/街道')
        return
      }
      if (!this.editInfo.addrDetail.address) {
        this.$Error('请填写详细的收获地址')
        return
      }
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      const data = this.editInfo.addrDetail
      if (this.editInfo.type == '1') {
        addDhsAddress(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('添加成功')
            this.editInfo.show = false
            // this.$emit('init', 1)
            this.$JumpPath(this, 'dhs')
          } else {
            this.$Error(res.msg)
          }
        })
      } else {
        addDhsAddress(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('添加成功')
            this.editInfo.show = false
            // this.$emit('init', 1)
            this.$JumpPath(this, 'dhs')
          } else {
            this.$Error(res.msg)
          }
        })
      }
    }
  },
  watch: {
    // 编辑页面关闭清除数据
    'editInfo.show': {
      handler(val) {
        if (!val) {
          this.editInfo.addrDetail = {
            // address_id: '',
            receiver_name: '',
            receiver_mobile: '',
            province: '',
            city_id: '',
            area_id: '',
            town_id: '',
            address: '',
            type: ''
          }
          this.editInfo.areaBtnTextEdit = ''
          this.editInfo.areaBtnTextEditTown = ''
          this.areaCode = []
          this.areaBtnText = '点击选择'
          this.areaBtnTextTown = '点击选择'
          this.selectArea = 1
          this.selectAreaTown = 1
          this.discernTextarea = ''
        }
      },
      deep: true
    },
    // 监听县区的变化
    'editInfo.addrDetail.area_id': {
      handler() {
        this.townLists = []
        const data = {
          city_id: this.editInfo.addrDetail.area_id
        }
        getAddressTown(data).then(res => {
          if (res.status == 1) {
            if (!res.data.length) {
              this.editInfo.isNeedTownMust = 0
              this.editInfo.areaBtnTextEditTown = '暂无数据'
              this.$loadingWrap.close()
              return
            }
            this.editInfo.isNeedTownMust = 1
            this.townLists = res.data
            this.$loadingWrap.close()
          } else {
            this.$loadingWrap.close()
            this.$Error(res.msg)
          }
        })
      },
      deep: true
    }
  },
  created() {
    getDhsAddress().then(res => {
      const resData = res.data.data  // 此处为null
      // console.log(res, '请求数据 data')
     if (resData) {
        if (resData.address == '') {
        // // console.log('没有地址')
        this.editInfo.addrDetail.type = 1
      } else {
        this.editInfo.type = 2
        this.editInfo.addrDetail.type = 2
        this.editInfo.addrDetail.receiver_name = resData.receiver_name
        this.editInfo.addrDetail.receiver_mobile = resData.receiver_mobile
        this.editInfo.areaBtnTextEdit = resData.province + ' ' + resData.city + ' ' + resData.area
        this.editInfo.areaBtnTextEditTown = resData.town
        this.editInfo.addrDetail.address = resData.address
        this.editInfo.addrDetail.province_id = resData.province_id
        this.editInfo.addrDetail.city_id = resData.city_id
        this.editInfo.addrDetail.area_id = resData.area_id
        this.editInfo.addrDetail.town_id = resData.town_id
      }
     }
    })
  }
})
</script>

<style lang="scss">
.townList {
  padding-top: 20px;
  .li {
    transition-duration: 0ms;
    transition-property: none;
    line-height: 88px;
    width: 100%;
    font-size: 32px;
    text-align: center;
    color: #333;
    border-bottom: 1px solid #f9f9f9;
  }
}
.areaList {
  width: 100%;
}
.selectArea,
.j-addrM-selectArea {
  color: #999;
  padding-left: 30px;
  font-size: 26px;
  line-height: 98px;
}
.edit-addr-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  z-index: 12;
  input,
  textarea {
    border: 0;
    outline: 0;
    resize: none;
  }
  .address-header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    line-height: 94px;
    background: #fff;
    border-bottom: 2px solid #f5f5f5;
    text-align: center;
    .btn-back {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 80px;
      height: 94px;
      padding-top: 4px;
    }
    .icon-backg {
      font-size: 40px;
    }
    span {
      font-size: 32px;
    }
  }
  .edit-content {
    font-size: 26px;
    height: calc(100vh - 184px);
    overflow-y: auto;
    .edit-wrap {
      margin-bottom: 20px;
      background: #fff;
      padding: 0 30px;
    }
    .block-title {
      padding: 20px 0;
      border-bottom: 1px solid #f5f5f5;
    }
    .auto-discern {
      padding-bottom: 36px;
    }
    .auto-discern-textarea {
      display: block;
      width: 100%;
      height: 140px;
      padding: 20px 0;
      font-size: 26px;
    }
    .auto-discern-btn {
      width: 188px;
      height: 62px;
      font-size: 26px;
      margin: 0 auto;
    }
    li {
      border-bottom: 1px solid #f5f5f5;
      overflow: hidden;
      white-space: normal;
      label {
        display: block;
        float: left;
        width: 160px;
        line-height: 98px;
        font-weight: normal;
        text-align: right;
        font-size: 28px;
        color: #333;
      }
      .right-input {
        width: 500px;
        height: 97px;
        padding: 30px 0;
        padding-left: 30px;
        font-size: 26px;
      }
    }
    .addr-detail-textarea {
      width: 500px;
      height: 180px;
      padding-left: 30px;
      padding-top: 30px;
      font-size: 26px;
    }
  }
  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 98px;
    font-size: 32px;
    text-align: center;
    color: #fff;
    background: #fff;
    a {
      display: block;
      width: 700px;
      height: 76px;
      margin: 11px auto;
      line-height: 76px;
      border-radius: 76px;
    }
  }
  .icon-back {
      position: absolute;
      top: 50%;
      left: 20px;
      width: 20px;
      height: 40px;
      transform: translateY(-50%);
      background: url(https://img.wifenxiao.com/h5-wfx/images/user/icon_arrowBack.png) center/cover
      no-repeat;
    }
}
</style>
